<template>
  <div ref="maxdiv" class="bgimg">
    <el-alert
      title="请尽量使用浏览器打开，不要使用微信自带的浏览器打开，避免导致数据不同步"
      type="error"
    />
    <!-- 登录表单 -->
    <div class="biaodan">
      <div
        style="
          width: 100%;
          height: 100px;
          line-height: 100px;
          font-size: 20px;
          font-weight: bold;
          text-align: center;
        "
      >
        小七刷课系统
      </div>
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
        style="width: 80%"
      >
        <el-form-item label="账号" prop="username">
          <el-input
            type="username"
            v-model="ruleForm.username"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            type="password"
            v-model="ruleForm.password"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item style="margin-top: 50px; margin-left: 60px">
          <el-button type="primary" @click="submitForm('ruleForm')"
            >提交</el-button
          >
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- <el-alert title="error alert" type="error" /> -->
  </div>
</template>

<script>
import { reactive, ref } from "vue";
import router from "@/router";
import { ElMessage } from "element-plus";
import axios from "axios";
// 先引入对应的接口
import { getProduct, login } from "../uitils/products.js";

// axios.defaults.withCredentials = false;
axios.defaults.baseURL = '/api/'
export default {
  data() {
    return {
      ruleForm: {
        username: "",
        password: "",
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  created() {
    this.keyupSubmit();
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const userData = {
            username: this.ruleForm.username,
            password: this.ruleForm.password,
          };
          login(userData)
            .then((res) => {
              if (res.code == 500) {
                ElMessage.error("账号或密码错误，请重新输入");
              } else {
                localStorage.setItem("token", res.data.token);
                getProduct()
                  .then((res) => {
                    localStorage.setItem("username", res.data.realName);
                    localStorage.setItem("className", res.data.className);
                    localStorage.setItem("userid", res.data.id);
                    router.push("/pc_home");
                  })
                  .catch(function (error) {
                    console.log(error);
                  });
              }
            })
            .catch((err) => {
              console.log("错误", err);
            });
        } else {
          //输入失败
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //绑定回车事件
    keyupSubmit() {
      document.onkeydown = (e) => {
        let _key = window.event.keyCode;
        //!this.clickState是防止用户重复点击回车
        if (_key === 13 && !this.clickState) {
          this.submitForm("ruleForm");
        }
      };
    },
  },

  mounted() {
    this.$nextTick(() => {
      this.$refs.maxdiv.style.height = window.innerHeight - 1 + "px";
    });
  },
};
</script>

<style scoped>
.bgimg {
  width: 1920px;
  height: 922px;
  background-color: lightgreen;
  padding-top: 1px;
  margin: 0 auto;
}
.biaodan {
  width: 465px;
  height: 470px;
  background-color: #fff;
  /* opacity: 0.75; */
  margin: 200px auto;
}
.el-alert {
  margin: 20px 0 0;
}
.el-alert:first-child {
  margin: 0;
}
@media all and (min-width: 1920px) {
  .bgimg{
    width: 100%;
  }
}
</style>
